import React, { Component } from 'react'
import { Button, Modal, Select, Form, Row, Col, Input } from 'antd';

export default class index extends Component {
    state = {
        visible: false,
        confirmLoading: false,
    };

    showModal = () => {
        this.setState({
            visible: true,
        });
    };

    handleOk = () => {
        this.setState({
            confirmLoading: true,
        });
        setTimeout(() => {
            this.setState({
                visible: false,
                confirmLoading: false,
            });
        }, 2000);
    };

    handleCancel = () => {
        console.log('Clicked cancel button');
        this.setState({
            visible: false,
        });
    };

    render() {
        const { visible, confirmLoading } = this.state;

        const formItemLayout = {
            labelCol: {
              xs: { span: 24 },
              sm: { span: 8 },
            },
            wrapperCol: {
              xs: { span: 24 },
              sm: { span: 16 },
            },
          };
        return (
            <div>
                <Button type="primary" onClick={this.showModal} >添加</Button>
                <Modal
                    title="新增"
                    visible={visible}
                    onOk={this.handleOk}
                    confirmLoading={confirmLoading}
                    onCancel={this.handleCancel}
                    width={1200}
                >

                    <Form {...formItemLayout} layout="horizontal">
                        <Row gutter={16}>
                            <Col span={8}>
                                <Form.Item label="科室名称">
                                    <Input placeholder="科室名称" />
                                </Form.Item>
                            </Col>
                            <Col span={8}>
                                <Form.Item label="科室编号">
                                    <Input placeholder="科室编号" />
                                </Form.Item>
                            </Col>


                        </Row>
                    </Form>

                </Modal>


            </div>
        )
    }
}
